/**
 # Tire Agent main CSS file
 ============================
 
 ## TOC
 - Variables
 - Reset
 - Typography
 - Structure
 - Tire Agent Blocks
 - Native WordPress Blocks
 */

/*
Variables
=========
*/

:root {
  --ta-color-primary: hsla(221, 77%, 41%, 1);
  --ta-color-neutral-100: hsla(0, 0%, 100%, 1);
  --ta-color-neutral-200: hsla(0, 0%, 98%, 1);
  --ta-color-neutral-300: hsla(0, 0%, 85%, 1);
  --ta-color-neutral-400: hsla(0, 0%, 44%, 1);
  --ta-color-neutral-900: hsla(231, 11%, 13%, 1);
  --ta-color-accent-warm: hsla(39, 100%, 57%, 1);
  --ta-color-accent-cool: hsla(124, 98%, 35%, 1);
  --ta-color-accent-teal: hsla(168, 99%, 48%, 1);
  --ta-color-border: var(--ta-color-neutral-300);
  --ta-color-shadow: hsla(0, 0%, 91%, 1);
  --ta-color-link: var(--ta-color-primary);
  --ta-color-link-active: var(--ta-color-primary);
  --ta-color-button: var(--ta-color-primary);
  --ta-color-button-hover: hsla(221, 71%, 48%, 1);
  --ta-color-button-warm: var(--ta-color-accent-warm);
  --ta-color-button-warm-hover: hsla(39, 100%, 47%, 1);
  --ta-color-button-bright: var(--ta-color-accent-teal);
  --ta-color-button-bright-hover: rgb(0, 206, 165);

  --ta-max-width-site: 1456px;
  --ta-site-gutter: 28px;

  --ta-font-family: 'Lato', 'Arial', 'Helvetica', sans-serif;
}

/*
Reset
=====
*/

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	-moz-tab-size: 4;
	  -o-tab-size: 4;
	     tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }
}

body {
  line-height: 1.5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
Typography
==========
*/

html,
body,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--ta-font-family)!important;
  color: var(--ta-color-neutral-900);
}

h1 {
  font-size: 1.75rem;
  line-height: 1.21;
  font-weight: 900;
}

h2,
h3,
h4 {
  font-size: 1.5rem;
  font-weight: 900;
}

h2,
h3 {
  line-height: 1.25;
}

h4 {
  line-height: 1.166;
}

h5 {
  font-size: 1rem;
  line-height: 1.125;
  font-weight: 900;
}

p,
li {
  font-size: 0.875rem;
  line-height: 1.25;
}

a,
a:hover,
a:active {
  color: var(--ta-color-link);
}

a:hover,
a:active {
  text-decoration: none;
}

/* Typography [Desktop] */

@media screen and (min-width: 1024px) {

  h1 {
    font-size: 4.0625rem;
    /* 65px */
    line-height: 1.14;
  }

  h2,
  h3,
  h4,
  h5 {
    line-height: 1.2;
  }

  h2 {
    font-size: 3.125rem;
    /* 50px */
  }

  h3 {
    font-size: 2.5rem;
    /* 40px */
  }

  h4 {
    font-size: 1.5rem;
    /* 24px */
  }

  h5 {
    font-size: 1.25rem;
    /* 20px */
  }

  p,
  li {
    font-size: 1rem;
    line-height: 1.5;
  }
}

/*
Structure
=========
*/

/* utility */

.template-identifier {
  display: none;
}

/* section */

.section {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.section--alt {
    background-color: var(--ta-color-neutral-200);
  }

/* 
NOTE: '.container' is used on production as a wrapper 

.site-column: the container that centers content in the browser
.container: an element inherited from the previous blog setup 
  — this is a workaround for now.
.bread-crumbs-holder: this is the name given to the breadcrumb bar at the top 
  — targeting it this way for specificity reasons.
*/

.posts .container {
  max-width: unset!important;
}

.site-column {
  padding-inline: var(--ta-site-gutter);
}

.site-column,
.posts .container.breadcrumbs-holder {
  max-width: var(--ta-max-width-site)!important;
  margin-inline: auto;
  width: 100%;
}

/* Remove :before because it's displaying as table */

.posts .container.breadcrumbs-holder:before {
  display: none;
}

@media screen and (min-width: 1200px) {
  .section {
    padding-block: 80px;
    gap: 60px;
  }

  .posts .container.breadcrumbs-holder {
    padding-inline: var(--ta-site-gutter);
  }

  .posts .container.breadcrumbs-holder {
    padding-top: 24px!important;
    padding-bottom: 24px!important;
  }
}

/*
Tire Agent Blocks 
(alphabetically listed)
=======================
*/

/*
article list
*/

.ta-block-article-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
}

.ta-block-article-list__link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none!important;
  }

.ta-block-article-list__title {
    color: var(--ta-color-neutral-900);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

.ta-block-article-list__image {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    border: 2px solid var(--ta-color-border);
  }

/* TA CMS Overrides — Override pre-existing styles we can't control */

.posts ul.ta-block-article-list {
  list-style: none;
  margin: 0;
}

/*
blog callout
*/

.ta-blog-callout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  margin: 32px 0;
  border-radius: 10px;
  background-color: var(--ta-color-neutral-200);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  text-align: left;
}

.ta-blog-callout__icon {
    position: absolute;
    left: -16px;
    top: -16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 32px;
    border: 2px solid var(--ta-color-primary);
    background: var(--ta-color-neutral-100);
    box-shadow: 0px 0px 0px 4px var(--ta-color-neutral-100);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--ta-color-primary);
  }

.ta-blog-callout ul {
    padding-left: 16px;
  }

.ta-blog-callout ul:has(~ p) {
    padding-left: 24px;
  }

.ta-blog-callout--info {
  position: relative;
  background-color: var(--ta-color-primary);
  color: var(--ta-color-neutral-100);
}

/*
blog product card
*/

.ta-blog-product-card {
  container-name: blog-product-card;
  container-type: inline-size;
  text-align: left;

}

.ta-blog-product-card__title,
  .ta-blog-product-card__description {
    font-size: 1.25rem;
    line-height: 1.4;
  }

.ta-blog-product-card__title {
    font-weight: 900;
    margin: 0;
  }

.ta-blog-product-card__description {
    margin-block-end: 40px;
  }

.ta-blog-product-card__description > a {
      color: var(--ta-color-link)!important;
    }

.ta-blog-product-card__description > a:hover {
      color: var(--ta-color-link-active)!important;
    }

.ta-blog-product-card__details-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

.ta-blog-product-card__details {
    width: 100%;
  }

.ta-blog-product-card__table-title {
    font-size: 1rem;
    font-weight: 900;
    margin-block-end: 16px;
  }

.ta-blog-product-card__table {
    table-layout: fixed;
    width: 100%;
    border-spacing: 0;
  }

.ta-blog-product-card__table > thead,
    .ta-blog-product-card__table > tbody,
    .ta-blog-product-card__table > tfoot {
      border: none;
      background: transparent;
    }

.ta-blog-product-card__table tr:nth-child(odd) {
      background-color: var(--ta-color-neutral-200);
    }

.ta-blog-product-card__table tr>td:first-child {
      font-weight: 700;
      width: 40%;
    }

.ta-blog-product-card__table td {
      padding: 4px;
    }

.ta-blog-product-card__preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

.ta-blog-product-card__discount-tag {
    position: absolute;
    right: 1px;
    display: flex;
    padding: 4px 12px;
    border-radius: 4px;
    border: 2px solid var(--ta-color-accent-cool);
    background: var(--ta-color-accent-cool);
    color: var(--ta-color-neutral-100, #FFF);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
  }

.ta-blog-product-card__image {
    margin-inline: 28px;
  }

.ta-blog-product-card__price {
    margin-block-start: 8px;
    font-size: 1.25rem;
    font-weight: 900;
    text-align: center;
    color: var(--ta-color-neutral-900);
  }

.ta-blog-product-card__price-unit {
    font-size: 0.875rem;
    font-weight: 400;
  }

.ta-blog-product-card__button {
    margin-block-start: 32px;
    width: 100%;
  }

/* responsive adjustments */

@container blog-product-card (width > 600px) {

    .ta-blog-product-card__details-wrapper {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .ta-blog-product-card__image {
      max-height: 164px;
    }

}

/*
breadcrumb bar 
*/

/**
 * TODO: refactor to fit naming convention below 
 * None of these styles are controling the breadcrumbs
 */

.breadcrumbs-holder {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-block: 24px;
}

.ta-breadcrumbs {
  padding: 8px 0;
  font-size: 0.875rem;
  font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
  font-weight: 600;
  line-height: 140%;
  color: var(--ta-color-neutral-400);
}

/* abiding by the structure of yoast breadcrumb block */

.ta-breadcrumbs >span {
    display: inline-flex;
    align-items: center;
    gap: 5px 20px;
    flex-wrap: wrap;
  }

.ta-breadcrumbs >span >*:last-child {
      flex: 0 0 auto;
      text-overflow: ellipsis;
      max-width: 300px;
      overflow: hidden;
      white-space: nowrap;
      color: var(--ta-color-neutral-900);
    }

.ta-breadcrumbs a {
    text-decoration: none;
    color: var(--ta-color-neutral-400);
  }

.ta-breadcrumbs a:hover {
      color: var(--ta-color-neutral-900);
    }

/* CSS that matches class structure in astro */

/* remove :before — displaying as a table */

.breadcrumbs-holder:before {
    display: none;
  }

.breadcrumbs-holder .breadcrumbs .breadcrumbs__item:last-child,
  .breadcrumbs-holder .breadcrumbs .breadcrumbs__item:last-child .breadcrumbs__link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

/*
button 
*/

/* have to use .terms and .posts to fight specificity */

.ta-block-button,
a.ta-block-button,
.posts .ta-block-button,
.terms .ta-block-button,
.posts a.ta-block-button,
.terms a.ta-block-button,
.posts a.wp-block-button__link,
.terms a.wp-block-button__link {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding-block: 16px;
  padding-inline: 32px;
  border: none;
  border-radius: 10px;
  background-color: var(--ta-color-button);
  font-size: 16px; 
  font-weight: 700;
  line-height: 1;
  color: var(--ta-color-neutral-100)!important;
  text-decoration: none;
  text-align: center;
}

.ta-block-button:hover, a.ta-block-button:hover, .posts .ta-block-button:hover, .terms .ta-block-button:hover, .posts a.ta-block-button:hover, .terms a.ta-block-button:hover, .posts a.wp-block-button__link:hover, .terms a.wp-block-button__link:hover {
    background-color: var(--ta-color-button-hover);
    color: var(--ta-color-neutral-100);
  }

.ta-block-button--secondary, a.ta-block-button--secondary, .posts .ta-block-button--secondary, .terms .ta-block-button--secondary, .posts a.ta-block-button--secondary, .terms a.ta-block-button--secondary, .posts a.wp-block-button__link--secondary, .terms a.wp-block-button__link--secondary {
    background: transparent;
    border: 2px solid var(--ta-color-primary);
    color: var(--ta-color-primary)!important;
  }

.ta-block-button--secondary:hover, a.ta-block-button--secondary:hover, .posts .ta-block-button--secondary:hover, .terms .ta-block-button--secondary:hover, .posts a.ta-block-button--secondary:hover, .terms a.ta-block-button--secondary:hover, .posts a.wp-block-button__link--secondary:hover, .terms a.wp-block-button__link--secondary:hover {
      background-color: var(--ta-color-primary);
      color: var(--ta-color-neutral-100)!important;
    }

.ta-block-button--warm, a.ta-block-button--warm, .posts .ta-block-button--warm, .terms .ta-block-button--warm, .posts a.ta-block-button--warm, .terms a.ta-block-button--warm, .posts a.wp-block-button__link--warm, .terms a.wp-block-button__link--warm {
    background-color: var(--ta-color-button-warm);
    color: var(--ta-color-neutral-900)!important;
  }

.ta-block-button--warm:hover, a.ta-block-button--warm:hover, .posts .ta-block-button--warm:hover, .terms .ta-block-button--warm:hover, .posts a.ta-block-button--warm:hover, .terms a.ta-block-button--warm:hover, .posts a.wp-block-button__link--warm:hover, .terms a.wp-block-button__link--warm:hover {
      background-color: var(--ta-color-button-warm-hover);
      color: var(--ta-color-neutral-900)!important;
    }

.ta-block-button--bright, a.ta-block-button--bright, .posts .ta-block-button--bright, .terms .ta-block-button--bright, .posts a.ta-block-button--bright, .terms a.ta-block-button--bright, .posts a.wp-block-button__link--bright, .terms a.wp-block-button__link--bright {
    background-color: var(--ta-color-button-bright);
    color: var(--ta-color-neutral-900)!important;
  }

.ta-block-button--bright:hover, a.ta-block-button--bright:hover, .posts .ta-block-button--bright:hover, .terms .ta-block-button--bright:hover, .posts a.ta-block-button--bright:hover, .terms a.ta-block-button--bright:hover, .posts a.wp-block-button__link--bright:hover, .terms a.wp-block-button__link--bright:hover {
      background-color: var(--ta-color-button-bright-hover);
      color: var(--ta-color-neutral-900)!important;
    }

.ta-block-button--full, a.ta-block-button--full, .posts .ta-block-button--full, .terms .ta-block-button--full, .posts a.ta-block-button--full, .terms a.ta-block-button--full, .posts a.wp-block-button__link--full, .terms a.wp-block-button__link--full {
    width: 100%;
  }

.ta-block-button--center, a.ta-block-button--center, .posts .ta-block-button--center, .terms .ta-block-button--center, .posts a.ta-block-button--center, .terms a.ta-block-button--center, .posts a.wp-block-button__link--center, .terms a.wp-block-button__link--center {
    margin-inline: auto;
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .posts .ta-block-button,
  .posts a.ta-block-button,
  .posts a.wp-block-button__link,
  :where(.wp-block-button__link) {
    padding-block: 20px;
    padding-inline: 40px;
    font-size: 20px;
  }
}

/* 
category card
*/

.ta-category-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 28px;
  width: 320px;
  padding: 30px 20px;
  border-radius: 20px; 
  background: var(--ta-color-neutral-100);
  box-shadow: 0px 0px 12px 0px var(--ta-color-shadow);
  scroll-snap-align: start;
}

.ta-category-card__title {
    margin-block-end: 10px;
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    line-height: 120%;
    color: var(--ta-color-neutral-900);
  }

.ta-category-card__description {
    font-size: 1rem;
    line-height: 150%;
    text-align: center;
    color: var(--ta-color-neutral-400);
  }

.ta-category-card__image {
    width: 106px;
    height: 106px;
  }

.ta-category-card__wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px 28px;
    justify-content: flex-start;
    margin-inline: 0;
    padding-block: 24px;
    overflow-x: auto;
    width: 100%;
    padding-inline-start: 0;
    padding-inline-end: var(--ta-site-gutter);
    /* scroll-snap-type: x proximity;
    scroll-snap-points-x: repeat(320px); */
  }

.ta-category-card__wrapper:before,
  .ta-category-card__wrapper:after {
    content: '';
    display: inline-flex;
    width: 1px;
    min-width: 1px;
  }

.ta-category-card__container {
    padding-block: 24px;
    padding-inline-start: 24px;
  }

/* responsive adjustments */

@media screen and (min-width: 1200px) {
  .ta-category-card__image {
    width: 130px;
    height: 130px;
  }
  .ta-category-card__wrapper {
    width: 100%;
    gap: 10px 32px;
    justify-content: flex-start;
    margin-block-start: 36px;
    margin-inline: 0;
    padding-inline-start: 0;
    padding-inline-end: var(--ta-site-gutter);
    padding-block: 24px;
  }
}

/* 
category pills
*/

/* TA CMS Overrides — Override pre-existing styles we can't control */

.posts a.ta-block-category-pill,
.ta-block-category-pill {
  padding: 4px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ta-color-neutral-900)!important;
  border-radius: 20px;
  background: var(--ta-color-neutral-100);
  text-decoration: none;
}

.ta-block-category-pills {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.ta-block-category-pills a.ta-block-category-pill {
    background-color: var(--ta-color-neutral-200);
  }

.ta-block-category-pills a.ta-block-category-pill:hover {
      background-color: var(--ta-color-primary);
      color: var(--ta-color-neutral-100)!important;
    }

/* 
newsletter form
*/

.ta-newsletter-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 24px;
  margin-block-end: 55px;
  background-color: var(--ta-color-neutral-200);
  border-radius: 10px;
}

.ta-newsletter-cta__content {
    text-align: center;
  }

.ta-newsletter-cta__title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--ta-color-neutral-900);
  }

.ta-newsletter-cta__description {
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--ta-color-neutral-400, #707070);
  }

.ta-newsletter-cta__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-block-start: 40px;
  }

.ta-newsletter-cta__input {
    display: flex;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    flex-grow: 1;
    padding: 13px 16px;
    padding-block: 13px;
    padding-inline: 60px 16px;
    border-radius: 10px;
    border: 2px solid var(--ta-color-neurtral-300, #D8D8D8);
    background-color: var(--ta-color-neutral-100, #FFF);
    background-image: url('images/icon-envelope.svg');
    background-repeat: no-repeat;
    background-size: 20px 15px;
    background-position: 20px center;
    font-size: 1.25rem;
  }

.ta-newsletter-cta__image {
    position: relative;
    max-width: 280px;
    margin: 40px auto -95px;
  }

/* used for blog post single template */

.ta-newsletter-cta--condensed .ta-newsletter-cta__title {
      font-size: 1rem;
    }

.ta-newsletter-cta--condensed .ta-newsletter-cta__description {
      font-size: 0.875rem;
    }

.ta-newsletter-cta--condensed .ta-newsletter-cta__image {
      max-width: 232px;
    }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .ta-newsletter-cta {
    flex-direction: row;
    gap: 60px;
    justify-content: space-between;
    align-items: center;
    padding: 40px 60px;
    border-radius: 20px;
  }

    .ta-newsletter-cta__content {
      text-align: left;
      flex-basis: 775px;
    }

    .ta-newsletter-cta__title {
      font-size: 3.125rem;
    }

    .ta-newsletter-cta__form {
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .ta-newsletter-cta__image {
      flex-grow: 1;
      margin: 0;
      max-width: 445px;
    }
}

/*
post card slider
*/

.ta-block-post-card-slider {
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.ta-block-post-card-slider__posts {
    display: flex;
    flex-direction: row;
    gap: 32px;
    padding-block: 24px;
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
    .ta-block-post-card-slider__posts {
      padding-block: 60px;
    }
}

/*
post card
*/

.ta-block-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 319px;
  max-width: 445px;
  scroll-snap-align: start;
}

.ta-block-post-card__image {
    margin-block-end: 8px;
    border-radius: 10px;
    border: 2px solid var(--ta-color-neutral-300);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 67.91%, rgba(0, 0, 0, 0.40) 100%);
  }

.ta-block-post-card__title,
  .ta-block-post-card__description {
    text-align: left;
  }

.ta-block-post-card__title {
    margin-block: 0;
    -webkit-line-clamp: 2;
  }

.ta-block-post-card__description,
  .ta-block-post-card__description p {
    color: var(--ta-color-neutral-400);
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 140% !important;
  }

.ta-block-post-card__category {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
  }

.ta-block-post-card__category-link{
    position: absolute;
    width: 100%;
  }

.posts .ta-block-post-card__title a {
  color: var(--ta-color-neutral-900)!important;
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
  line-height: 116%;
}

@media screen and (min-width: 1200px) {
    .ta-block-post-card__image {
      margin-block-end: 12px;
    }

    .ta-block-post-card__description,
    .ta-block-post-card__description p {
      font-size: 16px;
      line-height: 150% !important;
    }

  .posts .ta-block-post-card__title a {
    line-height: 120%;
  }
}

/*
post hero
*/

.ta-post-hero {
  margin-block: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}

.ta-post-hero__details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--ta-color-neutral-900);
  }

.ta-post-hero__image {
    width: 100%;
    height: 50vw;
    max-height: 300px;
    background-position: bottom center;
    background-size: cover;
  }

.ta-post-hero__category {
    display: flex;
    justify-content: center;
  }

.ta-post-hero__excerpt {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--ta-color-neutral-100);
  }

.ta-post-hero__excerpt p {
      line-height: 125% !important;
    }

/* Prefixed '.posts' to combat specificity */

.posts .ta-post-hero__category {
    display: flex;
    align-self: center;
    padding: 4px 12px;
    background-color: var(--ta-color-neutral-200);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ta-color-neutral-900)!important;
    border-radius: 20px;
  }

/* responsive adjustments */

@media screen and (min-width: 1200px) {
  .ta-post-hero {
    margin-block: 32px;
    flex-direction: row-reverse;
    align-items: stretch;
    border-radius: 20px;
  }

    .ta-post-hero__image {
      width: 45%;
      height: auto;
      max-height: unset;
    }

    .ta-post-hero__details {
      position: relative;
      max-width: 55%;
      align-items: flex-start;
      justify-content: flex-start;
      padding-block: 100px 80px;
      padding-inline: 50px;
    }

    .ta-post-hero__category {
      justify-content: flex-start;
    }

    .ta-post-hero__excerpt {
      text-align: left;
      font-size: 2rem;
    }
      /* fighting specificity */
      .ta-post-hero__excerpt p {
        line-height: 150% !important;
      }

    .ta-post-hero__category {
      position: absolute;
      top: 44px;
      left: 50px;
    }
}

/*
post listing
*/

/* TODO: remove .tire-agent-blocks__post-listing */

.ta-block-post-listing,
.tire-agent-blocks__post-listing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*
post hero slider
*/

/* swiper variables */

:root {
  --ta-post-swiper-height: 560px;
  --ta-post-swiper-height-min: 480px;
  --ta-post-swiper-control-size: 60px;
  --ta-post-swiper-padding: 20px;
  --ta-color-swiper-dot: var(--ta-color-neutral-300);
  --ta-color-swiper-dot-active-mobile: #FFFFFF; /* White for mobile */
  --ta-color-swiper-dot-active-desktop: #FFFFFF; /* Changed back to white for desktop */
}

/* post swiper */

.posts .ta-post-swiper {
  position: relative;
  border-radius: 20px;
}

.posts .ta-post-swiper__details,
  .posts .ta-post-swiper__control,
  .posts .ta-post-swiper__nav {
    display: flex;
  }

.posts .ta-post-swiper__details {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-inline: var(--ta-post-swiper-padding);
    padding-block-start: var(--ta-post-swiper-padding);
    padding-block-end: calc(var(--ta-post-swiper-padding) * 4);
    margin-block-start: auto;
    margin-top: auto;
    background-color: var(--ta-color-neutral-900);
    text-align: center;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: relative;
    bottom: 0;
  }

.posts .ta-post-swiper__details >* {
      color: var(--ta-color-neutral-100)!important;
    }

.posts .ta-post-swiper__controls {
    display: none;
    visibility: hidden;
    position: relative;
  }

.posts .ta-post-swiper__title,
  .posts .ta-post-swiper__excerpt { 
    color: var(--ta-color-neutral-100)!important;
    text-align: center;
  }

.posts .ta-post-swiper__title {
    margin: 0;
    padding: 0!important;
    font-family: var(--ta-font-family);
    font-style: normal;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.21;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.posts .ta-post-swiper__title:before {
      display: none;
    }

.posts .ta-post-swiper__excerpt {
    font-size: 16px;
    line-height: 1.25;
    min-height: 3.75em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* have to get specific to override swiper styles */

.ta-post-swiper .ta-post-swiper__post {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  border-radius: 20px;
  overflow: hidden;
  height: var(--ta-post-swiper-height);
}

/* Fix for container to hide adjacent slides */

.site-column.tire-agent-blocks__post-slider {
  position: relative;
  border-radius: 20px; /* Add border radius to container */
  margin: 0 auto; /* Add margin to prevent shadow cutoff */
}

/* Fix for swiper container */

.swiper.ta-post-swiper {
  overflow: hidden;
  border-radius: 20px;
}

/* Ensure slides don't show on the sides */

.swiper-wrapper {
  overflow: visible;
}

/* swiper nav (dots) on mobile - inside black section */

.ta-post-swiper>.ta-post-swiper-nav:has(span) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: unset;
  left: 0;
  right: 0;
  bottom: 30px;
  width: 100%;
  padding: 4px;
  z-index: 5;
}

.ta-post-swiper>.ta-post-swiper-nav:has(span) >* {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 100%;
    background-color: var(--ta-color-neutral-400);
    opacity: 1;
  }

.ta-post-swiper>.ta-post-swiper-nav:has(span) >*[class*="active"] {
      background-color: var(--ta-color-swiper-dot-active-mobile); /* White active dot on mobile */
    }

/* target non-empty swiper nav */

.ta-post-swiper>.ta-post-swiper-nav--inverse:has(span) >* {
  background-color: var(--ta-color-neutral-400);
}

.ta-post-swiper>.ta-post-swiper-nav--inverse:has(span) >*[class*="active"] {
    background-color: var(--ta-color-swiper-dot-active-mobile); /* White active dot on mobile */
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .posts .ta-post-swiper {
    --ta-post-swiper-padding: 60px;
    min-height: var(--ta-post-swiper-height-min);
  }

    .posts .ta-post-swiper__details {
      flex-basis: 45%;
      align-items: flex-start;
      justify-content: center;
      margin-block-start: 0;
      margin-top: 0;
      padding: var(--ta-post-swiper-padding);
      padding-block-end: var(--ta-post-swiper-padding);
      text-align: left;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      position: relative;
      bottom: auto;
    }

    .posts .ta-post-swiper__excerpt,
    .posts .ta-post-swiper__title {
      text-align: left;
    }

    .posts .ta-post-swiper__excerpt>* {
      font-size: 20px;
      line-height: 1.4;
    }

    .posts .ta-post-swiper__title {
      font-size: 45px!important;
      line-height: 1.1!important;
    }

    .posts .ta-post-swiper__button {
      margin-block-start: 20px;
    }

    .posts .ta-post-swiper__controls {
      display: block;
      visibility: visible;
    }

    .posts .ta-post-swiper__next,
    .posts .ta-post-swiper__prev {
      display: flex;
      align-content: center;
      text-align: center;
      visibility: visible;
      display: block;
      position: absolute;
      bottom: calc((var(--ta-post-swiper-height-min) / 2) + (var(--ta-post-swiper-control-size) / 2));
      width: var(--ta-post-swiper-control-size);
      height: var(--ta-post-swiper-control-size);
      border-radius: 100%;
      background-color: var(--ta-color-neutral-100);
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);
      font-size: 1.5rem;
      color: var(--ta-color-neutral-400);
      transition: color 200ms ease;
      z-index: 10;
      cursor: pointer;
      transform: translateY(30px);
    }

      .posts .ta-post-swiper__next:hover,
      .posts .ta-post-swiper__next:active,
      .posts .ta-post-swiper__prev:hover,
      .posts .ta-post-swiper__prev:active {
        color: var(--ta-color-neutral-900);
      }

    .posts .ta-post-swiper__prev {
      left: -24px;
    }

    .posts .ta-post-swiper__next {
      right: -24px;
    }

  .ta-post-swiper .ta-post-swiper__post {
    min-height: var(--ta-post-swiper-height);
    flex-direction: row;
    justify-content: flex-start;
    background-position: right bottom;
    background-size: contain;
  }

  /* Desktop dots positioned aligned with Read More button */
  .ta-post-swiper>.ta-post-swiper-nav:has(span) {
    justify-content: flex-start;
    left: var(--ta-post-swiper-padding);
    right: auto;
    width: auto;
    z-index: 10;
  }
  
  /* Change dot color for desktop */
  .ta-post-swiper>.ta-post-swiper-nav:has(span) >*[class*="active"],
  .ta-post-swiper>.ta-post-swiper-nav--inverse:has(span) >*[class*="active"] {
    background-color: var(--ta-color-swiper-dot-active-desktop); /* White active dot on desktop */
  }
  
  /* Add padding to container bottom to make space for dots and ensure hidden overflow */
  .site-column.tire-agent-blocks__post-slider {
    padding-bottom: 40px;
    margin: 0 auto; /* More margin for desktop to prevent shadow cutoff */
    padding: 0 var(--ta-site-gutter);
  }
  
  /* Fix swiper container to position dots correctly */
  .swiper.ta-post-swiper {
    overflow: hidden;
    border-radius: 20px;
  }
}

@media screen and (min-width: 1456px) {
    .posts .ta-post-swiper__prev {
      left: calc((var(--ta-post-swiper-control-size)/2) * -1);
    }

    .posts .ta-post-swiper__next {
      right: calc((var(--ta-post-swiper-control-size)/2) * -1);
    }
}

/*
search products cta
*/

/* 
TODO: Refactor this selector 
— using this selector because that is what wraps the cta block 
*/

.tire-agent-blocks__shop-cta {
  transform: translateY(-100px);
}

.ta-shop-cta {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ta-shop-cta__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px 80px;
    background-color: var(--ta-color-neutral-900, #1D1E24);
    border-radius: 10px;
  }

.ta-shop-cta__title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    color: var(--ta-color-neutral-100, #FFF);
  }

.ta-shop-cta__idk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

.ta-shop-cta__bullets {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ta-color-neutral-100, #FFF);
  }

.ta-shop-cta__bullets ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

.ta-shop-cta__bullets li {
      position: relative;
      margin-left: 24px;
    }

.ta-shop-cta__bullets li:before {
      display: block;
      content: '';
      position: absolute;
      left: -24px;
      top: 2px;
      width: 20px;
      height: 20px;
      background-image: url('images/icon-check.svg');
      background-repeat: no-repeat;
      background-position: center;
    }

.ta-shop-cta__rim,
  .ta-shop-cta__wheel {
    position: relative;
    align-self: center;
  }

.ta-shop-cta__rim {
    width: 128px;
    height: 128px;
    margin-top: -136px;
    margin-left: -90px;
    z-index: 2;
  }

.ta-shop-cta__wheel {
    width: 116px;
    height: 143px;
    margin-top: -60px;
    margin-left: 110px;
    z-index: 3;
  }

/* fighting specificity */

.posts .ta-shop-cta .ta-shop-cta__button,
.posts .ta-shop-cta a.ta-shop-cta__button {
  position: relative;
  padding-inline: 40px;
  z-index: 10;
}

@media screen and (min-width: 1024px) {
  .tire-agent-blocks__shop-cta {
    transform: translateY(-100px);
  }
    .ta-shop-cta__content {
      align-items: flex-start;
      justify-content: center;
      margin-inline-end: 50px;
      padding: 40px;
      border-radius: 20px;
    }

    .ta-shop-cta__title {
      margin-right: 170px;
      font-size: 40px;
      text-align: left;
    }

    .ta-shop-cta__bullets {
      flex-grow: 1;
    }

      .ta-shop-cta__bullets ul {
        flex-direction: row;
        margin-left: 24px;
        gap: 50px;
      }

      .ta-shop-cta__bullets li {
        margin-left: 0;
      }

    .ta-shop-cta__idk {
      flex-direction: row;
      gap: 50px;
    }

    .ta-shop-cta__rim,
    .ta-shop-cta__wheel {
      position: absolute;
    }

    .ta-shop-cta__rim {
      width: 180px;
      height: 180px;
      margin-top: unset;
      margin-left: unset;
      top: 10px;
      right: 75px;
    }

    .ta-shop-cta__wheel {
      width: 160px;
      height: 198px;
      margin-top: unset;
      margin-left: unset;
      top: 10px;
      right: -24px;
    }
}

@media screen and (min-width: 1200px) {
    .ta-shop-cta__content {
      margin-inline-end: 145px;
    }

    .ta-shop-cta__title {
      margin-right: 170px;
    }

    .ta-shop-cta__rim {
      width: 230px;
      height: 230px;
      right: 125px;
    }

    .ta-shop-cta__wheel {
      width: 198px;
      height: 245px;
      right: 0;
    }
}

/*
search form
*/

/* search variables */

:root {
  --ta-size-search-height: 60px;
}

.ta-search {
  position: relative;
  display: flex;
  justify-content: flex-end;
  min-width: var(--ta-size-search-height);
  height: var(--ta-size-search-height);
}

.ta-search__form,
  .ta-search__toggle {
    border-radius: 10px;
    border: 1px solid var(--ta-color-neutral-400);
    background: var(--ta-color-neutral-200);
  }

.ta-search__form.is-hidden, .ta-search__toggle.is-hidden {
      display: none;
    }

.ta-search__form {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
  }

.ta-search__input,
  .ta-search__button {
    display: inline-flex;
    border: none;
    background: transparent;
    height: calc(var(--ta-size-search-height) - 2px);
    line-height: 1;
  }

.ta-search__input {
    padding-inline-start: 20px;
    padding-inline-end: 10px;
    font-size: 1.25rem;
    font-weight: 700;
  }

.ta-search__input:focus {
      outline: none;
    }

.ta-search__input::-moz-placeholder {
      color: var(--ta-color-neutral-400);
    }

.ta-search__input::placeholder {
      color: var(--ta-color-neutral-400);
    }

.ta-search__button,
  .ta-search__toggle {
    width: var(--ta-size-search-height);
    padding: 0;
    background-image: url('images/icon-search.svg');
    background-position: center;
    background-repeat: no-repeat;
  }

.ta-search__button span, .ta-search__toggle span {
      opacity: 0;
    }

.ta-search__toggle {
    position: absolute;
    right: 0;
    height: var(--ta-size-search-height);
    z-index: 1;
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {

    .ta-search__form{
      position: static;
    }

      .ta-search__form.is-hidden {
        display: flex;
      }

    .ta-search__toggle,
    .ta-search__toggle.is-hidden {
      display: none;
    }
}

/*
section title
*/

.ta-block-section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  text-align: center;

  
}

.ta-block-section-title > * {
    margin-block: 0;
  }

/* adds a max-width to the subheading
   * this may become default if used regularly 
   */

.ta-block-section-title--contained > *:last-child {
      max-width: 780px;
    }

.ta-block-section-title > *:last-child {
    font-size: 14px;
    line-height: 140%;
    color: var(--ta-color-neutral-400);
  }

.ta-block-section-title > *:first-child,
  .ta-block-section-title > *:only-child {
    font-size: 24px;
    font-weight: 900;
    color: var(--ta-color-neutral-900);
    line-height: 125%;
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
    .ta-block-section-title > *:last-child {
      font-size: 20px;
    }

    .ta-block-section-title > *:first-child,
    .ta-block-section-title > *:only-child {
      font-size: 50px;
      line-height: 120%;
    }
}

/*
slash divider
*/

.ta-block-divider {
  border: none;
  background-image: url('images/ta-divider-slashes.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  margin: 0;
  padding-block: 40px;
  height: 24px;
  width: 100%;
}

/*
toc - table of contents
*/

.posts .ta-toc,
.ta-toc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  gap: 16px;
  padding: 4px 20px 20px;
}

.posts .ta-toc__title, .ta-toc__title {
    color: var(--ta-color-neutral-900);
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
  }

.posts .ta-toc ul, .ta-toc ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

.posts .ta-toc ul >li>ul, .ta-toc ul >li>ul {
      padding-block-start: 20px;
      padding-inline-start: 20px;
    }

.posts .ta-toc__list a, .ta-toc__list a {
      color: var(--ta-color-neutral-900) !important;
      text-decoration: none;
      font-size: 14px;
      line-height: 150%;
    }

.posts .ta-toc__list a:hover, .ta-toc__list a:hover {
      color: var(--ta-color-primary);
    }

/* responsive adjustments */

@media screen and (max-width: 1200px) {

  .posts .ta-toc,
  .ta-toc {
    padding-block-start: 20px;
    border-radius: 10px;
    background-color: var(--ta-color-neutral-200);
  }

    .posts .ta-toc__list a, .ta-toc__list a {
      line-height: 140%;
    }
}

/* 
Native WordPress Blocks  
=======================
*/

/*
author
*/

.wp-block-post-author {
  /* may not need these rules due to native WP rules */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background-color: var(--ta-color-neutral-200);
  border-radius: 10px;
}

.wp-block-post-author__avatar {
    margin-right: 0!important;
  }

.wp-block-post-author__avatar img {
      max-width: 48px;
      max-height: 48px;
      overflow: hidden;
      border-radius: 100%;
    }

.wp-block-post-author__content {
    text-align: center;
  }

.wp-block-post-author__byline-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

.wp-block-post-author__byline {
    color: var(--ta-color-neutral-400);
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
  }

.wp-block-post-author__name {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--ta-color-neutral-900);
  }

.wp-block-post-author__bio {
    margin-block-start: 16px;
    font-size: 16px;
    line-height: 150%;
    color: var(--ta-color-neutral-900);
  }

/* combatting specificity */

.wp-block-post-author .wp-block-post-author__bio {
    font-size: 16px;
  }

.posts .wp-block-post-author__name a {
    text-decoration: none;
    color: var(--ta-color-neutral-900) !important;
  }

.posts .wp-block-post-author__name a:hover {
    color: var(--ta-color-primary) !important;
  }

@media screen and (min-width: 1200px) {
    .wp-block-post-author {
      flex-direction: row;
      align-items: flex-start;
    }

      .wp-block-post-author__content {
        text-align: left;
      }
}

/*
page numbers
*/

/* Using two parent selectors to be cross compatible */

.page-numbers-wrapper,
ul.page-numbers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 12px;
}

.page-numbers-wrapper .page-numbers, ul.page-numbers .page-numbers {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid var(--ta-color-primary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ta-color-primary);
    text-decoration: none;
  }

.page-numbers-wrapper .page-numbers.current, ul.page-numbers .page-numbers.current {
      background-color: var(--ta-color-primary);
      color: var(--ta-color-neutral-100);
    }

/* responsive adjustments  */

@media screen and (min-width: 1200px) {

  .page-numbers-wrapper,
  ul.page-numbers {
    gap: 16px;
  }
    
    .page-numbers-wrapper .page-numbers, ul.page-numbers .page-numbers {
      padding: 16px;
      font-size: 1.25rem;
    }

}

/*
separator / hr
*/

/*
NOTE: Have to use !important to combat other styles
*/

hr {
  max-width: calc(var(--ta-max-width-site) - (var(--ta-site-gutter) * 2)) !important;
  width: 100% !important;
}

.wp-block-separator {

  border-color: var(--ta-color-border)!important;
}

.wp-block-separator.has-background:not(.is-style-dots) {
    background-color: var(--ta-color-border);
  }

/* 
WordPress Template Support 
==========================
*/

/*
post
*/

/* Blog post template structure */

.blog-post__columns {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "toc"
      "main"
      "sidebar";
    align-items: flex-start;
    gap: 20px;
    margin-block-start: 20px;
    margin-block-end: 64px;
  }

.blog-post__sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

.blog-post__sidebar--left {
      grid-area: toc;
    }

.blog-post__sidebar--right {
      grid-area: sidebar;
    }

.blog-post__content-column {
    grid-area: main;
  }

/* Blog post info */

.blog-post-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block-start: 20px;
  line-height: 150%;
}

.blog-post-info__byline {
    display: flex;
    gap: 16px;
    align-items: center;
  }

.blog-post-info__byline img {
      border-radius: 100%;
    }

.blog-post-info__divider {
    display: none;
  }

/* wp native class support */

.blog-post-info .avatar {
    max-width: 32px;
    max-height: 32px;
    overflow: hidden;
  }

.blog-post-info .avatar img {
      border-radius: 100%;
    }

/* Prefixed '.posts' to combat specificity */

.posts .blog-post-info__author,
  .posts .blog-post-info__author a {
    color: var(--ta-color-neutral-900) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
  }

.posts .blog-post-info__author a:hover {
    color: var(--ta-color-primary) !important;
    text-decoration: underline;
  }

/* TA CMS Overrides — Override pre-existing styles we can't control */

.posts h1.blog-post__title {
    margin: 0;
    padding: 0 !important;
    font-family: var(--ta-font-family);
    font-size: 28px;
    line-height: 140%;
    text-transform: none !important;
    color: var(--ta-color-neutral-900);
  }

.posts h1.blog-post__title:before {
      display: none;
    }

/* Blog post content styles */

.blog-post-content p,
  .blog-post-content ul,
  .blog-post-content ol {
    margin-block-end: 20px;
    font-size: 16px;
    line-height: 150%;
    color: var(--ta-color-neutral-900);
  }

/* remove margin if figure follows */

.blog-post-content p:has(+ figure), .blog-post-content ul:has(+ figure), .blog-post-content ol:has(+ figure) {
      margin-block-end: 0;
    }

.blog-post-content ul,
  .blog-post-content ol {
    margin-inline-start: 28px;
  }

.blog-post-content li {
    margin-block-end: 16px;
    line-height: 150%;
  }

.blog-post-content h1,
  .blog-post-content h2,
  .blog-post-content h3,
  .blog-post-content h4,
  .blog-post-content h5,
  .blog-post-content h6 {
    margin-block-end: 16px;
    font-weight: 900;
    line-height: 140%;
    color: var(--ta-color-neutral-900);
  }

.blog-post-content h1 +.wp-block-image img, .blog-post-content h2 +.wp-block-image img, .blog-post-content h3 +.wp-block-image img, .blog-post-content h4 +.wp-block-image img, .blog-post-content h5 +.wp-block-image img, .blog-post-content h6 +.wp-block-image img {
      margin-block-start: 0;
    }

.blog-post-content h1 {
    font-size: 44px;
  }

.blog-post-content h2,
  .blog-post-content h3 {
    font-size: 24px;
  }

.blog-post-content h4 {
    font-size: 20px;
    margin-block-end: 8px;
  }

.blog-post-content img[class^="wp-image-"],
  .blog-post-content .wp-block-image img {
    margin-block: 12px;
    border-radius: 10px;
    border: 2px solid var(--ta-color-border);
  }

.blog-post-content .wp-block-image.alignright img, .blog-post-content .wp-block-image.alignleft img, .blog-post-content .wp-block-image.aligncenter img {
        margin-block: 0;
      }

.blog-post-content .wp-block-image.alignright {
      padding-left: 16px;
      padding-top: 16px;
      padding-bottom: 16px;
    }

.blog-post-content .wp-block-image.alignleft {
      padding-right: 16px;
      padding-top: 16px;
      padding-bottom: 16px;
    }

.blog-post-content .wp-block-image.aligncenter {
      padding-top: 16px;
      padding-bottom: 16px;
      display: flex;
      justify-content: center;
    }

/*TODO: Make mixin for these styles — shared with /blocks/button.css */

.blog-post-content .gb-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    padding-block: 1rem;
    padding-inline: 2rem;
    margin-block-end: 20px;
    border: none;
    border-radius: 0.625rem;
    background-color: var(--ta-color-button);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ta-color-neutral-100) !important;
    text-decoration: none;
  }

.blog-post-content .gb-button:hover {
      background-color: var(--ta-color-button-hover);
      /* no variable for this since it's not used elsewhere */
      color: var(--ta-color-neutral-100);
    }

/* responsive adjustments */

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .blog-post__columns {
      margin-block-start: 40px;
      grid-template-columns: minmax(1fr, 280px) minmax(62ch, 68ch);
      grid-template-columns: minmax(200px, 240px) 1fr;
      gap: 40px;
      grid-template-areas:
        "toc main"
        ". sidebar";
    }

    .blog-post__sidebar--right {
      flex-direction: row;
      align-items: flex-start;
      gap: 0;
    }

      .blog-post__sidebar--right >* {
        flex-basis: 50%;
      }
}

@media screen and (min-width: 768px) {

  /* TA CMS Overrides — Override pre-existing styles we can't control */
    .posts h1.blog-post__title {
      text-align: left;
    }
    .blog-post__sidebar--left {
      position: sticky;
      top: 152px;
    }

  /* blog post info */
  .blog-post-info {
    flex-direction: row;
    justify-content: flex-start;
    margin-block-start: 24px;
    gap: 16px;
  }

    .blog-post-info__byline {
      margin-inline-end: 20px;
    }

    .blog-post-info__divider {
      display: inline-flex;
      width: 5px;
      height: 5px;
      background-color: var(--ta-color-neutral-900);
      border-radius: 5px;
    }
}

@media screen and (min-width: 1200px) {

  /* blog post */
    .blog-post__columns {
      grid-template-columns: 280px 72ch 280px;
      grid-template-areas:
        "toc main sidebar";
      justify-content: space-between;
      margin-block-start: 48px;
      margin-block-end: 80px;
    }

    .blog-post__sidebar--left {
      top: 232px;
    }

  /* TA CMS Overrides — Override pre-existing styles we can't control */
    .posts h1.blog-post__title {
      margin-block-start: 40px;
      font-size: 65px;
      line-height: 110%;
      text-align: left;
    }

  /* Blog post content styles */

    .blog-post-content p,
    .blog-post-content ul,
    .blog-post-content ol {
      margin-block-end: 24px;
      font-size: 20px;
      line-height: 140%;
    }

    .blog-post-content li {
      line-height: 140%;
    }

    .blog-post-content ul,
    .blog-post-content ol {
      margin-inline-start: 50px;
    }

    .blog-post-content h1 {
      font-size: 44px;
    }

    .blog-post-content h2 {
      font-size: 36px;
    }

    .blog-post-content h3 {
      font-size: 28px;
    }

    .blog-post-content h4 {
      font-size: 24px;
    }
      .blog-post-content .wp-block-image img {
        margin-block: 40px;
      }

      .blog-post-content .wp-block-image.alignright {
        padding-left: 24px;
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .blog-post-content .wp-block-image.alignleft {
        padding-right: 24px;
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .blog-post-content .wp-block-image.aligncenter {
        padding-top: 40px;
        padding-bottom: 40px;
        display: flex;
        justify-content: center;
      }

    .blog-post-content .wp-block-buttons {
      margin-bottom: 24px;
    }

    .blog-post-content img[class^="wp-image-"] {
      margin-block: 12px
    }

    /*TODO: Make mixin for these styles — shared with /blocks/button.css */
    .blog-post-content .gb-button {
      margin-block-end: 24px;
    }
}

/* Sidebar Group */

.sidebar-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 16px;
}

.sidebar-group__header {
    padding-bottom: 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: var(--ta-color-neutral-900);
    border-bottom: 1px solid var(--ta-color-border);
  }

/*
archive
*/

/* Archive Header */

.archive-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: 20px;
}

.archive-header__title-wrapper,
  .archive-header__content,
  .archive-header__social {
    display: flex;
    align-items: center;
  }

.archive-header__title-wrapper,
  .archive-header__content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

.archive-header__label {
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    text-transform: uppercase;
    color: var(--ta-color-neutral-400);
  }

.archive-header__image {
    flex-shrink: 0;
    max-width: 106px;
  }

.archive-header__image img {
      border-radius: 100%;
    }

.archive-header__description,
  .archive-header__description p {
    font-size: 16px;
    font-weight: 400;
    line-height: 125% !important;
    color: var(--ta-color-neutral-900);
  }

.archive-header__description p:not(:last-child) {
    margin-block-end: 16px;
  }

.archive-header__social {
    gap: 20px;
  }

.archive-header__social >li {
      font-size: 24px;
      line-height: 32px;
    }

.archive-header__content--search .archive-header__nav-numbers {
    display: none;
  }

/* Archive Content */

.archive-content {
  margin-block-start: 40px;
  margin-block-end: 64px;
}

.archive-content__nav-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-block-end: 40px;
  }

.archive-content__nav-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 125%;
    color: var(--ta-color-neutral-900);
    text-align: center;
  }

/* hide top nav numbers */

.archive-content__nav-wrapper--top> .archive-content__nav-title + .archive-content__nav-numbers {
    display: none;
  }

.archive-content__posts {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(319px, 1fr));
    justify-items: center;
    margin-block-end: 44px;
  }

/* TA CMS Overrides — Override pre-existing styles we can't control */

/* TODO: Make this a mixin */

.posts h1.archive-header__title {
    margin: 0;
    padding: 0 !important;
    font-family: var(--ta-font-family);
    font-size: 28px;
    line-height: 140%;
    text-transform: none !important;
    color: var(--ta-color-neutral-900);
  }

.posts h1.archive-header__title:before {
      display: none;
    }

/* responsive adjustments */

@media screen and (min-width: 1200px) {

  /* Archive Header */
  .archive-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding-inline: 0;
    margin-block: 40px;
  }

    .archive-header__title-wrapper {
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: 16px;
    }

    .archive-header__content {
      align-items: flex-start;
      text-align: left;
    }

    .archive-header__image {
      max-width: 130px;
    }

    .archive-header__description,
    .archive-header__description p {
      font-size: 20px;
      font-weight: 400;
      line-height: 140% !important;
    }

  .archive-header__content--search {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-grow: 1;
  }

    .archive-header__content--search .archive-header__title-wrapper {
      flex-direction: column;
      gap: 10px;
    }
    .archive-header__content--search .archive-header__nav-numbers {
      display: block;
    }

  /* Archive Content */
  .archive-content {
    margin-block-end: 80px;
  }

    .archive-content__nav-wrapper {
      padding-block: 32px;
      margin-block-end: 0;
    }

      .archive-content__nav-wrapper--top {
        justify-content: space-between;
        align-items: flex-end;
      }

    .archive-content__nav-title {
      font-size: 40px;
      font-weight: 900;
      line-height: 120%;
      text-align: left;
    }

    .archive-content__nav-wrapper--top> .archive-content__nav-title + .archive-content__nav-numbers {
      display: block;
    }

    .archive-content__posts {
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      gap: 32px;
    }
    .posts h1.archive-header__title {
      font-size: 65px;
      line-height: 110%;
      text-align: left;
    }
}

/*
Page-specific Blocks - Not used for the blog
============================================
*/

/*
callout
*/

.ta-block-callout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-radius: 16px;
  padding: 28px;
  background-color: var(--ta-color-neutral-200);
}

.ta-block-icon-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ta-block-icon-group__image-wrapper {
    width: 24px;
    flex-shrink: 0;
  }

.ta-block-icon-group__content>:first-child {
      margin-block-end: 8px;
      font-size: 16px;
      line-height: 18px;
      font-weight: 900;
      text-transform: uppercase;
    }

.ta-block-icon-group__content>:not(:first-child) {
      font-size: 14px;
      line-height: 140%;
    }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .ta-block-callout {
    flex-direction: row;
    align-items: flex-start;
    padding-inline: 28px;
  }

    .ta-block-callout--col-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

  .ta-block-icon-group {
    gap: 16px;
  }
    .ta-block-icon-group__image-wrapper {
      width: 32px;
    }
      .ta-block-icon-group__content>:first-child {
        font-size: 20px;
        line-height: 120%;
      }

      .ta-block-icon-group__content>:not(:first-child),
      .ta-block-icon-group__content>:not(:first-child) > * {
        font-size: 16px;
        line-height: 150%;
      }
      .ta-block-icon-group__content>:not(:first-child) > strong {
        font-weight: 900!important;
      }
}

/*
how it works
*/

.ta-block-hiw {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  row-gap: 32px;
  margin-inline: 20px;
}

.ta-block-hiw__item {
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 112.5%;
  }

/* icon wrapper element */

.ta-block-hiw__video,
.ta-block-hiw .wp-block-video {
    border: 2px solid var(--ta-color-border);
    border-radius: 10px;
    margin-block-end: 12px;
  }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .ta-block-hiw {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-inline: auto;
  }

    .ta-block-hiw__item {
      font-size: 16px;
      font-style: normal;
      font-weight: 900;
      line-height: 112.5%;
    }

    /* icon wrapper element */
    .ta-block-hiw__video,
	.ta-block-hiw .wp-block-video {
      margin-block-end: 20px;
    }
}

/*
page hero
*/

.ta-page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--ta-max-width-site);
  margin: 28px auto 0;
}

/* heading modifiers */

.ta-page-hero--black-friday h1 i,
    .ta-page-hero--black-friday h1 em,
    .ta-page-hero--cyber-monday h1 i,
    .ta-page-hero--cyber-monday h1 em {
      font-style: normal !important;
      font-weight: 900;
      font-size: 28px;
      line-height: 121%;
    }

.ta-page-hero--black-friday * > h1 i,
    .ta-page-hero--black-friday * > h1 em {
      color: var(--ta-color-accent-warm) !important;
    }

.ta-page-hero--cyber-monday * > h1 i,
    .ta-page-hero--cyber-monday * > h1 em {
      color: var(--ta-color-accent-teal) !important;
    }

/* content */

.ta-page-hero__content {
    display: flex;
    padding: 28px 28px 48px 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    align-self: stretch;
    background-color: var(--ta-color-neutral-900);
    border-radius: 16px;
  }

/* 
     * using .gb- to fight specificity 
     * forgive me for this mess
     */

.ta-page-hero__content h1[class*="gb-"],
    .ta-page-hero__content h2[class*="gb-"],
    .ta-page-hero__content h3[class*="gb-"],
    .ta-page-hero__content h4[class*="gb-"],
    .ta-page-hero__content h5[class*="gb-"],
    .ta-page-hero__content h6[class*="gb-"] {
      margin: 0;
      padding: 0 !important;
      font-family: var(--ta-font-family);
      font-size: 28px;
      line-height: 121%;
      text-transform: none !important;
      color: var(--ta-color-neutral-100);
    }

.ta-page-hero__content h1[class*="gb-"]:before, .ta-page-hero__content h2[class*="gb-"]:before, .ta-page-hero__content h3[class*="gb-"]:before, .ta-page-hero__content h4[class*="gb-"]:before, .ta-page-hero__content h5[class*="gb-"]:before, .ta-page-hero__content h6[class*="gb-"]:before {
        display: none;
      }

.ta-page-hero__content p[class*=" "] {
      color: var(--ta-color-neutral-300);
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 140%;
    }

.ta-page-hero figure {
    max-width: 360px;
    margin-block-start: -20px;
  }

/* responsive adjustments */

@media screen and (min-width: 1200px) {
  .ta-page-hero {
    flex-direction: row;
    justify-content: space-between;
    margin-block-end: 40px;
    min-height: 480px;
    border-radius: 16px;
    background: linear-gradient(100deg, var(--ta-color-neutral-900) 60.02%, #FFF 60.02%);
  }

      .ta-page-hero--black-friday h1 i,
      .ta-page-hero--black-friday h1 em,
      .ta-page-hero--cyber-monday h1 i,
      .ta-page-hero--cyber-monday h1 em {
        font-size: 65px;
        line-height: 110%;
      }

    .ta-page-hero__content {
      align-items: flex-start;
      padding: 60px 0 60px 60px;
      background: transparent;
      border-radius: 0;
      max-width: 768px;
    }

      /* 
       * using .gb-headline to fight specificity 
       * forgive me for this mess
       */
      .ta-page-hero__content h1[class*="gb-"],
      .ta-page-hero__content h2[class*="gb-"],
      .ta-page-hero__content h3[class*="gb-"],
      .ta-page-hero__content h4[class*="gb-"],
      .ta-page-hero__content h5[class*="gb-"],
      .ta-page-hero__content h6[class*="gb-"] {
        font-size: 65px;
        line-height: 110%;
        text-align: left;
      }

        .ta-page-hero__content h1[class*="gb-"]:before, .ta-page-hero__content h2[class*="gb-"]:before, .ta-page-hero__content h3[class*="gb-"]:before, .ta-page-hero__content h4[class*="gb-"]:before, .ta-page-hero__content h5[class*="gb-"]:before, .ta-page-hero__content h6[class*="gb-"]:before {
          display: none;
        }

      .ta-page-hero__content p[class*=" "] {
        margin-right: 80px;
        text-align: left;
        font-size: 20px;
      }

    .ta-page-hero figure {
      width: 632px;
      max-width: 632px;
      align-self: flex-end;
      margin-block-start: 0;
      margin-block-end: 40px;
    }
}

/*
perks
*/

.ta-block-perks {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  row-gap: 24px;
  margin-inline: 20px;
  max-width: 1200px;
}

.ta-block-perk {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* icon wrapper element */

.ta-block-perk__image-wrapper {
    width: 56px;
    flex-shrink: 0;
  }

/* content element */

/* title element */

.ta-block-perk__content >:first-child {
      font-size: 20px;
      font-weight: 900 !important;
      line-height: 140%;
      margin-block-end: 4px;
    }

.ta-block-perk__content >:not(:first-child),
    .ta-block-perk__content >:not(:first-child) * {
      font-size: 14px;
      font-weight: 400;
      line-height: 140%;
      margin: 0;
    }

/* responsive adjustments */

@media screen and (min-width: 1024px) {
  .ta-block-perks {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 60px;
         column-gap: 60px;
    row-gap: 40px;
    margin-inline: auto;
  }

  .ta-block-perk {
    gap: 28px;
  }

    /* icon wrapper element */
    .ta-block-perk__image-wrapper {
      width: 72px;
    }

    /* content element */

      /* title element */
      .ta-block-perk__content >:first-child {
        font-size: 24px;
        line-height: 120%;
        margin-block-end: 8px;
      }

      .ta-block-perk__content >:not(:first-child),
      .ta-block-perk__content >:not(:first-child) * {
        font-size: 16px;
        line-height: 150%;
      }
}